<template>
  <div class="pay-the-rent actWrap">
    <nodata v-show="noData"></nodata>
    <ul>
      <li v-for="(item, index) in orderList" :key="index">
        <div class="li-v rq-status">{{item.bill.beginDateMonth | formatDate}} 账单 <span class="status" @click.stop="pay(item)" :class="{payed: item.bill.statusValue === '已支付'}">{{item.bill.statusValue}}</span></div>
        <div class="li-v area">{{item.house.houseTitle}}</div>
        <div class="li-v yq-money">
          <span class="yq" v-if="item.bill.breachOfContractDate">逾期：{{item.bill.breachOfContractDate}}天</span>
          <span class="money"><span class="cn">￥</span>{{item.bill.theMoney}}</span>
        </div>
      </li>
    </ul>
    <payment v-model="paymentShow" :payInfo="payInfo"></payment>
  </div>
</template>
<style lang="less">
.pay-the-rent{
  
}
</style>

<script>
  // import UploadFileByTXY from '@/util/uploadFileByTXY'
  import Payment from '@/components/Payment'

  export default {
    name: 'payTheRent',
    data () {
      return {
        orderList: [],
        img0: null,
        paymentShow: false,
        payInfo: '',
        hasBill: false,
        noData: false
      }
    },
    created () {
      this.init()
    },
    components: {
      Payment
    },
    mounted () {
      // 上传各种证件证书图片区域
      // UploadFileByTXY.upload({
      //   id: 'up',
      //   callback: (res) => {
      //     this.img0 = res.url
      //     console.log('sss')
      //   }
      // }, true)
    },
    methods: {
      init () {
        this.getDatas()
      },
      pay (item) {
        if (item.bill.statusValue === '等待付款') {
          this.paymentShow = true
          this.payInfo = {serviceId: item.bill.id, type: 'bill'}
        }
      },
      getDatas () {
        this.noData = false
        this.$axiosPosting(this.$api.myRentBillForRenter).then(res => {
          if (res.code === '0000') {
            this.orderList = res.data.list
            this.hasBill = true
            res.data.list.length < 1 && (this.noData = true) && this.$vux.toast.text('没有账单数据')
          } else {
            this.$vux.toast.text(res.ms) && (this.noData = true)
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .pay-the-rent {
    font-size: .75rem;
    ul li {
      border-bottom: .3rem solid #F8F8F8;
      padding: .2rem 18px;
      .li-v {
        height: 1.4rem;
        line-height: 1.4rem;
      }
      div.rq-status {
        .status {
          font-size: .65rem;
          float: right;
          color: #ff3c00;
        }
        .payed {
          color: #ff9600;
        }
      }
      div.area {
        font-size: .65rem;
        color: #656565;
      }
      div.yq-money {
        text-align: right;
        .yq {
          float: left;
          font-size: .65rem;
          color: #656565;
        }
        .money {
          color: #ff3c00;
          font-size: .85rem;
          .cn {
            position: relative;
            font-size: .7rem;
            bottom: 0.025rem;
          }
        }
      }
    }
  }
</style>
